<template>
  <BorderBox styleText="padding: 0px;">
    <template v-slot:title_l>
      分层拓扑
    </template>
    <template v-slot:main_info>

      <div class='nodeChart' :id="`nodeChart-${id}`" ref="chartRef"></div>
    </template>
  </BorderBox>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { forEach, filter, sum, values } from 'lodash';
import * as d3 from 'd3'
import BorderBox from '@/components/BorderBox'
import useChart from './useChart';
import { typeList } from './util'
import './index.less'


const props = defineProps({
  nodes: {
    type: Array,
    default: () => ([])
  },
  edges: {
    type: Array,
    default: () => ([])
  },
  isPlay: {
    type: Boolean,
    default: false
  },

})
const emits = defineEmits(['on-click-node'])
const selectedNodes = ref([])
const isBuildingChart = ref(false)
const { setNode, setLink, setdownTooltip, drawArrow, chartRef, id, showCheckRect } = useChart({ selectedNodes, appClick })
function printChart(WIDTH, props) {
  console.log(WIDTH);

  let idHightList = {}; // 保存绘制过对应层级的高度
  let nodeWidthRow = []; // 每个节点每行每列的坐标数据
  let space_left;
  // eslint-disable-next-line @typescript-eslint/no-this-alias
  const uniId = id
  chartRef.value.innerHTML = '';
  const width = chartRef.value.clientWidth
  isBuildingChart.value = true
  const svg = d3.select(`#nodeChart-${uniId.value}`).append('svg').style('width', width);

  const g = svg.append('g').attr('id', 'chart_warp');
  //
  const { nodeWarp, downTooltipWarp, LineWarp } = drawArrow(g)

  // 各层级绘制
  forEach(typeList, (item, index) => {
    let nodes = filter(props.nodes, option => option.type === item.type);
    // console.log(nodes, 'nodes');

    nodes.length > 0 && setNode(WIDTH, item, nodes, nodeWarp, idHightList, props.isPlay, false, nodeWidthRow);
    nodes.length > 0 && props.isPlay && item.type === 'pod' && setdownTooltip(item, nodes);
  });
  forEach(props.edges, link => {
    setLink(link, props.nodes, LineWarp);
  });
  let heightSum = sum(values(idHightList));
  svg.style('height', heightSum);
  svg.selectAll('.node').on('mouseenter', d => {
    if (showCheckRect.value) {
      return;
    }
    let idx = d.idx;
    let links = filter(
      props.edges,
      edge => edge.source === idx || edge.target === idx
    );
    d3.selectAll('.node,.tooltip')
      .style('opacity', d => {
        return idx !== d.idx ? 0.2 : 1;
      })
      .select('text')
      .style('font-weight', d => {
        return idx !== d ? 400 : 500;
      });
    d3.selectAll('.line_path').attr('style', 'opacity: 0.2');
    forEach(links, link => {
      d3.select(`#line_${link.source}_${link.target}`).attr(
        'style',
        'opacity: 1; stroke-width: 2'
      );
      if (link.source === idx) {
        let node = props.nodes[link.target];
        d3.select(`#${node.type}_${node.idx}`).attr('style', 'opacity: 1');
      }
      if (link.target === idx) {
        let node = props.nodes[link.source];
        d3.select(`#${node.type}_${node.idx}`).attr('style', 'opacity: 1');
      }
    });
  });
  svg.selectAll('.node').on('mouseleave', () => {
    if (showCheckRect.value) {
      return;
    }
    d3.selectAll('.node,.tooltip')
      .style('opacity', 1)
      .select('text')
      .style('font-weight', 400);
    d3.selectAll('.line_path').attr('style', 'opacity: 1;stroke-width: 1;');
  });
  isBuildingChart.value = false
}
function print(props) {
  console.log(chartRef.value, 'vlaue');
  if(!chartRef.value) {
    return;
  }
  const width = chartRef.value.clientWidth;

  selectedNodes.value = []
  printChart(width, props)
}
onMounted(() => {
  print(props)
  window.addEventListener('resize', () => print(props))
})
watch([() => props.nodes, () => props.edges], () => {
  print(props)
})
function appClick(node) {
  emits('on-click-node', node)
}
</script>

<style lang="less">
@import './index.less';
</style>
